<template>
  <div class="user-container">
    <div class="search-container">
      <h-search :search="search" @search="onSearch" />

      <div class="operations-btns">
        <el-button type="success" icon="Plus" @click="handleAdd">新 增</el-button>
      </div>
    </div>

    <!--Table-->
    <h-table :list="list" :total="total" :options="options" :operates="operates" :columns="setting.columns"/>

    <Pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getPageList"/>

    <!--Dialog-->
    <el-dialog :title="dialog1.title" :width="dialog1.dWidth" v-model="dialog1.show" :append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form ref="dialog1Form" :model="dialog1.formInfo" :rules="dialog1.rules" label-width="65px" label-position="left">
        <el-form-item label="姓名" prop="name">
          <el-input v-model.trim="dialog1.formInfo.name" :style="dialog1.width"/>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model.trim="dialog1.formInfo.sex" :style="dialog1.width"/>
        </el-form-item>
        <el-form-item label="班级" prop="class">
          <el-input v-model.trim="dialog1.formInfo.class" :style="dialog1.width"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" v-preventDoubleClick @click="submitDialog1">确 定</el-button>
        <el-button @click="dialog1Close">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="User">
import setting from './setting'
import {isEmpty} from "@/utils/validate.js";

/** Base */
const {proxy} = getCurrentInstance()

/** Data */
//SearchBar
const searchMore = ref(false)
//Table
const table = reactive({
  list: [],
  total: 0,
  search: [
    { label: '姓名', prop: 'name', placeholder: '请输入', required: false, type: 'input' },
    { label: '班级', prop: 'class', placeholder: '请输入详细地址', required: false, type: 'input' },
    { label: '联系电话', prop: 'phone', placeholder: '请输入采样点联系电话', required: false, type: 'input' },
    { label: '开放时间', prop: 'time', placeholder: '请选择', required: false, type: 'date' },
    {
      label: '支持24小时',
      prop: 'isSupport',
      placeholder: '请选择',
      required: false,
      type: 'select',
      options: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
    },
  ],
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  options: {// table 配置的参数
    stripe: true,
    loading: false,
    highlightCurrentRow: true,
    mutiSelect: true
  },
  operates: {// table 配置的参数
    width: 160,
    fixed: "right",
    label: "操作",
    list: [
      {
        id: "edit", label: "修改", link: true, type: "primary", show: true, disabled: false,
        method: (index, row) => {
          handleEdit(row)
        }
      },
      {
        id: "del", label: "删除", link: true, type: "primary", show: true, disabled: false,
        method: (index, row) => {
          handleDel(row)
        }
      }
    ]
  }
})
const {search, list, total, queryParams, options, operates} = toRefs(table);

/** dialog*/
const dialog = reactive({
  dialog1: {
    show: false,
    title: '新增',
    dWidth: '550px',
    width: 'width:220px',
    rules: setting.rules,
    formInfo: {
      name: '',
      sex: '',
      class: '',
    },
  }
})
const {dialog1} = toRefs(dialog)

/** 生命周期钩子 */
onMounted(() => {
  getPageList()
})

/** Method */
//表单数据
function onSearch(data) {
  let _ = proxy
  queryParams.value = Object.assign({}, queryParams.value, { ...data });
  getPageList()
}

async function getPageList() {
  let _ = proxy
  total.value = 0
  list.value = []
  options.value.loading = true
  for (let i = 0; i < 10; i++) {
    list.value.push({
      id: `123456789${i + 1}`,
      name: `莲塘别墅广场${i + 1}`,
      sex: i%2===0?'男':'女',
      class: `班级${i + 1}`,
    });
  }
  total.value = list.value.length || 0
  setTimeout(() => {
    options.value.loading = false
  },500)

}

//删除
function handleDel(row) {
  let _ = proxy
  let delData = {systemUserIdList: [row.systemUserId]}
  _.$modal.confirm("确认删除该条记录？", "删除", () => {
    delOne(delData)
  })
}

//单条删除
async function delOne(id) {
  let _ = proxy
  const {data: res} = await _.$H.post(_.$A.user.del, JSON.stringify(id))
  if (res.code === 200) {
    _.$modal.msgSuccess('删除成功！')
  } else {
  }
  getTableData()
}

/** Dialog1 */
//新增
function handleAdd() {
  let _ = proxy
  dialog1.value.title = '新增'
  dialog1.value.show = true
}

function handleEdit() {
  let _ = proxy
  dialog1.value.title = '修改'
  dialog1.value.show = true
}

//提交按钮
function submitDialog1() {
  let _ = proxy
  _.$refs["dialog1Form"].validate(async (valid) => {
    if (valid) {
      if (_.$V.isEmpty(dialog1.value.formInfo.systemUserId)) {
        const {data: res} = await _.$H.post(_.$A.user.add, dialog1.value.formInfo)
        if (res.code === 200) {
          _.$modal.msgSuccess('提交成功！')
        } else {
        }
      } else {
        const {data: res} = await _.$H.post(_.$A.user.update, dialog1.value.formInfo)
        if (res.code === 200) {
          _.$modal.msgSuccess('修改成功！')
        } else {
        }
      }
      getTableData()
      dialog1.value.show = false
    }
  })
}

//dialog1关闭
function dialog1Close() {
  reset()
  dialog1.value.show = false
}

//dialog1重置表单
function reset() {
  let _ = proxy
  dialog1.value.formInfo = {
    name: '',
    sex: '',
    class: '',
  }
  _.resetForm("dialog1Form")
}
</script>

<style lang="less" scoped>
@import "index.less";
</style>
